<template>
    <section
        class="h-[60px]"
        :style="{
            backgroundColor: confDiy.bgColor
        }"
    >
        <div class="m-auto px-10 h-full flex items-center">
            <div v-if="confDiy.logoImage" class="flex items-center w-[100px] h-full mr-[50px]">
                <el-image
                    :src="appStore.toAbsoluteUrl(confDiy.logoImage)"
                    :lazy="true"
                    alt="logo"
                    class="max-w-full max-h-full"
                />
            </div>

            <div v-if="dataDiy.length > 0" class="flex flex-1 items-center gap-6">
                <template v-for="(item, index) in dataDiy">
                    <a
                        v-if="item.isEnable"
                        :key="index"
                        class="text-lg hover:opacity-80"
                        :style="{
                            color: confDiy.fontsColor
                        }"
                    >
                        {{ item.name }}
                    </a>
                </template>
            </div>

            <div v-if="confDiy.loginBtnShow" class="flex items-center gap-2">
                <el-button
                    type="primary"
                    class="hover:opacity-80"
                    link
                    :style="{ color: confDiy.fontsColor }"
                >
                    {{  confDiy.loginBtnName }}
                </el-button>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { HeaderConfigType, HeaderDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as HeaderConfigType,
            data: [] as HeaderDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as HeaderConfigType)
const dataDiy = ref([] as HeaderDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>
